<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="author" content="marendu">
  <title>转盘抽奖效果</title>
  <!-- 这里是css部分 -->
  <style>
    #bg {
      width: 650px;
      height: 600px;
      margin: 0 auto;
      background: url(turntable-bg.jpg) no-repeat;
      position: relative;
    }

    img[src^="pointer"] {
      position: absolute;
      z-index: 10;
      top: 155px;
      left: 247px;
    }

    img[src^="turntable"] {
      position: absolute;
      z-index: 5;
      top: 60px;
      left: 116px;
      transition: all 4s;
    }
  </style>
</head>

<body>
  <!-- 这里是HTML结构部分 -->
  <div id="bg"><img src="pointer.png" alt="pointer"><img src="turntable.png" alt="turntable"></div>
  <button onclick="btn()">概率统计</button>
  <button onclick="test()">测试100次抽奖</button>
  <!-- 这里是js部分 -->
  <script>
    var oPointer = document.getElementsByTagName("img")[0];
    var oTurntable = document.getElementsByTagName("img")[1];
    var cat = 51.4; //总共7个扇形区域，每个区域约51.4度
    var offOn = true; //是否正在抽奖
    var transformRotate = 0 //转圈度数
    var randmArr = [1, 5, 10, 20, 35, 55, 100] //概率计算为randmArr[i-1]和randmArr[i]之间
    // 打印概率
    function btn() {
      console.log(form);
      console.log(obj);
      let num = 0
      Object.keys(obj).map(item => {
        num += obj[item]
      })
      console.log(num);

    }
    oPointer.onclick = function () {
      if (offOn) {
        offOn = !offOn;
        ratating();
      }
    }
    let n = 0
    var testTime = null
    function test() {
      testTime = setInterval(() => {
        n++
        if (n > 99) {
          clearInterval(testTime)
        }
        ratating();

      }, 300);
    }
    //旋转
    //TODO: 规定中奖区间，通过区间判定值
    var prevrdm = 0; //缓存上一次的旋转度
    var obj = {} //产生的随机数的次数
    var form = {} //统计中奖的概率
    var timer = null
    function ratating() {
      var timer = null;
      const rdm = parseInt(Math.random() * (100 - 1) + 1);//随机的数
      var num = 7
      var nextrdm = 0; //本次旋转度
      console.log('rdm=' + rdm);
      // 统计随机数次数
      if (!obj[rdm]) {
        obj[rdm] = 1;
      } else {
        obj[rdm]++;
      }
      for (var i = 0; i < randmArr.length; i++) {
        if (i === 0) {
          if (rdm >= 0 && rdm <= randmArr[0]) {
            num = i + 1
            break
          }
        } else {
          if (rdm > randmArr[i - 1] && rdm <= randmArr[i]) {
            num = i + 1
            break
          }
        }

      }
      console.log('num=' + num);
      clearTimeout(timer);
      timer = null
      timer = setTimeout(function () {
        nextrdm = Math.floor((num * cat) - 24); //定义本次抽奖结果
        var biginRotate = 2 * 360 + (360 - prevrdm) //定义默认的旋转圈数，同时补全使轮盘置零，
        prevrdm = nextrdm

        transformRotate = nextrdm + biginRotate + transformRotate //本次旋转的度
        // 测试中奖的概率时，把下面注释掉，同时将timeout时间设置为0
        oTurntable.style.transform = "rotate(" + transformRotate + "deg)";
        setTimeout(function () {
          offOn = !offOn;
          // 统计中奖概率
          if (!form['a' + num]) {
            form['a' + num] = 1;
          } else {
            form['a' + num]++
          }
          console.log('transformRotate=' + transformRotate);
          // if (nextrdm <= cat * 1) { console.warn("一等奖"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "4999元"); }
          // else if (nextrdm <= cat * 2) { console.warn("二等奖"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "50元"); }
          // else if (nextrdm <= cat * 3) { console.warn("三等奖"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "10元"); }
          // else if (nextrdm <= cat * 4) { console.warn("四等奖"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "5元"); }
          // else if (nextrdm <= cat * 5) { console.warn("五等奖"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "免息服务"); }
          // else if (nextrdm <= cat * 6) { console.warn("六等奖"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "提交白金"); }
          // else if (nextrdm <= cat * 7) { console.warn("七等奖"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "未中奖"); }
          if (nextrdm <= cat * 1) { alert("恭喜你获得一等奖，4999元"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "4999元"); }
          else if (nextrdm <= cat * 2) { alert("恭喜你获得二等奖，50元"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "50元"); }
          else if (nextrdm <= cat * 3) { alert("恭喜你获得三等奖，10元"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "10元"); }
          else if (nextrdm <= cat * 4) { alert("恭喜你获得四等奖，5元"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "5元"); }
          else if (nextrdm <= cat * 5) { alert("恭喜你获得五等奖，免息服务"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "免息服务"); }
          else if (nextrdm <= cat * 6) { alert("恭喜你获得六等奖，提交白金"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "提交白金"); }
          else if (nextrdm <= cat * 7) { alert("你未中奖，下次好运"); console.log("nextrdm=" + nextrdm + "rdm=" + rdm + "，" + "未中奖"); }
        }, 0);
      }, 30);
    }
  </script>
</body>

</html>